<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的书签管理器</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <!-- 跳转到完整管理页面的链接卡片 -->
    <div id="go-to-manager" class="manager-link-card">
      <div class="card-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 2H20C21.1 2 22 2.9 22 4V20C22 21.1 21.1 22 20 22H4C2.9 22 2 21.1 2 20V4C2 2.9 2.9 2 4 2Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 2V4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M16 2V4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 10V12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M16 10V12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 18V20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M16 18V20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M4 8H20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M4 16H20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="card-content">
        <h3 class="card-title">查看所有书签</h3>
        <p class="card-description">管理、编辑和组织您的所有收藏</p>
      </div>
      <div class="card-arrow">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 18L15 12L9 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>

    <!-- 快速添加书签表单 -->
    <div class="bookmark-form">
      <div class="form-group">
        <input type="text" id="title-input" placeholder="输入标题">
      </div>
      <div class="form-group">
        <input type="text" id="url-input" placeholder="输入网址">
      </div>
      <div class="form-group">
        <input type="text" id="tags-input" placeholder="输入标签（用逗号或空格分隔）">
      </div>
      <div id="recent-tags-container" class="recent-tags">
        <h4>最近标签</h4>
        <div id="recent-tags-buttons" class="recent-tags-buttons"></div>
      </div>
      <button id="add-button">添加书签</button>
    </div>

    <!-- 最近添加的书签 -->
    <div class="recent-bookmarks">
      <h3>最近添加</h3>
      <div id="recent-bookmarks-container"></div>
    </div>
  </div>

  <script src="popup-script.js"></script>
</body>
</html>